<template>
	<!-- 商品组 -->
	<view class="diy-bargainGoods" :style="[{'background': background }]">
		<view class="goods-item dis-flex" v-for="(dataItem,index) in dataList" :key="index">
				<button @tap="_onTargetGoods(dataItem.active_id)" class="btn-normal dis-flex" >
					<view class="goods-item--container dis-flex">
						<!-- 商品图片 -->
						<view class="goods-image">
							<image class="image" :src="dataItem.goods_image"></image>
						</view>
						<view class="goods-info">
							<!-- 商品名称 -->
							<view class="goods-name">
								<text class="twolist-hidden">{{ dataItem.goods_name }}</text>
							</view>
							<!-- 参与的用户头像 -->
							<view v-if="dataItem.helps_count > 0" class="peoples dis-flex">
								<view class="user-list dis-flex">
									<view v-for="(values,index) in dataItem.helps" v-for-item="help" v-key="this" class="user-item-avatar">
										<image class="image" :src="values.user.avatarUrl"></image>
									</view>
								</view>
								<view class="people__text">
									<text>{{ dataItem.helps_count }}人正在砍价</text>
								</view>
							</view>
							<!-- 商品原价 -->
							<view class="goods-price">
								<text>￥{{ dataItem.original_price }}</text>
							</view>
							<!-- 砍价低价 -->
							<view class="floor-price">
								<text class="small">最低￥</text>
								<text class="big">{{ dataItem.floor_price }}</text>
							</view>
							<!-- 操作按钮 -->
							<view class="opt-touch">
								<view class="touch-btn">
									<text>立即参加</text>
								</view>
							</view>
						</view>
					</view>
				</button>
		</view>
	</view>
</template>
<script>
	export default {
		options: {
			addGlobalClass: true,
		},
		computed: {
			background() {
				console.log(this.dataList);
				return this.itemStyle.background;
			}
		},
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			dataList: {},
		},
		methods: {
			//跳转
			/**
			 * 跳转商品详情页
			 */
			_onTargetGoods(e) {
				// 记录formid
				uni.navigateTo({
					url: `/pages/bargain/goods/index?active_id=${e}`,
				});
			},

		}
	}
</script>

<style>
	/* common.wxss */

	/* 砍价商品 */

	.goods-item {
		margin-bottom: 20rpx;
		background: #fff;
		padding: 20rpx 16rpx;
	}

	.goods-item:last-child {
		margin-bottom: 0;
	}

	.goods-item .goods-image .image {
		display: block;
		width: 220rpx;
		height: 220rpx;
	}

	.goods-item .goods-info {
		width: 498rpx;
		padding-top: 8rpx;
		margin-left: 15rpx;
		position: relative;
	}

	.goods-item .goods-info .goods-name {
		font-size: 28rpx;
		min-height: 60rpx;
	}

	/* 正在参与的用户 */

	.goods-item .goods-info .peoples {
		margin-top: 15rpx;
	}

	.goods-item .goods-info .peoples .user-list {
		margin-right: 10rpx;
	}

	.goods-item .goods-info .peoples .user-list .user-item-avatar {
		margin-left: -8rpx;
	}

	.goods-item .goods-info .peoples .user-list .user-item-avatar:first-child {
		margin-left: 0;
	}

	.goods-item .goods-info .peoples .user-list .user-item-avatar .image {
		display: block;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.goods-item .goods-info .peoples .people__text {
		font-size: 24rpx;
		color: #818181;
	}

	/* 商品原价 */

	.goods-item .goods-info .goods-price {
		margin-top: 15rpx;
		color: #818181;
		font-size: 25rpx;
		text-decoration: line-through;
	}

	/* 砍价底价 */

	.goods-item .goods-info .floor-price {
		color: #fc1e56;
	}

	.goods-item .goods-info .floor-price .small {
		font-size: 24rpx;
	}

	.goods-item .goods-info .floor-price .big {
		font-size: 32rpx;
	}

	/* 立即参加按钮 */

	.opt-touch {
		position: absolute;
		bottom: 0;
		right: 10rpx;
	}

	.touch-btn {
		color: #fff;
		font-size: 28rpx;
		background: #d3a975;
		border-radius: 30rpx;
		padding: 10rpx 28rpx;
	}
</style>
